<template>
    <div id="id">
        <ul class="id_info">
            <li v-for="(val,index) in getinfo" :key="index">
                <div class="id_info_div">
                    <div class="id_info_span_1">
                        <nuxt-link :to="{name:'details-id',params:{id:val._id,title:val.title}}">{{val.title | ShowTitle}}</nuxt-link>
                    </div>
                    <div class="id_info_span_2">发布于 {{val.createTime |filterDate}}</div>
                    <div style="clear:both"></div>
                </div>
                <div class="id_info_content">
                    {{val.title | filterVal}}
                    <div class="id_info_content_read">
                        <nuxt-link :to="{name:'details-id',params:{id:val._id}}">阅读全文 »</nuxt-link>
                    </div>
                </div>
            </li>
            <div class="id_bottom">
                <span class="PreviousPage" @click="PreviousPage">« 上一页</span>
                <span class="nextPage" @click="NextPage">下一页 »</span>
                <div class="id_middle_center">博客归档</div>
            </div>
            <div style="clear:both"></div>
        </ul>
        <notifications></notifications>
    </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import Notify from "vue-notifyjs";
import Vue from "vue"
import "vue-notifyjs/themes/default.css";
Vue.use(Notify);
export default {
    data() {
        return {
            getinfo: [],
            content: undefined,
            page: 0,
            size: 10
        };
    },
    methods: {
        PreviousPage() {
            if (this.page >= 1) {
                this.page--;
                axios({
                    url:
                        "http://116.85.32.125:8765/api/InquiryAr?page=" +
                        this.page +
                        "&size=" +
                        this.size,
                    method: "get"
                }).then(response => {
                    this.getinfo = response.data.result;
                });
            } else {
                this.$notify({
                    message: "没有页面了!",
                    title: "提示"
                });
            }
        },
        NextPage() {
            this.page+=1;
            axios({
                url:
                    "http://116.85.32.125:8765/api/InquiryAr?page=" +
                    this.page +
                    "&size=" +
                    this.size,
                method: "get"
            }).then(response => {
                if (response.data.result.length == 0) {
                    this.page = 0;
                    this.$notify({
                        message: "已经到了最后一页",
                        title: "提示"
                    });
                } else {
                    this.getinfo = response.data.result;
                }
            });
        }
    },
    created() {
        axios({
            url:
                "http://116.85.32.125:8765/api/InquiryAr?page=" +
                this.page +
                "&size=" +
                this.size,
            method: "get"
        }).then(response => {
            this.getinfo = response.data.result;
        });
    },
    filters: {
        ShowTitle(val) {
            if (val.length >= 20) {
                return val.substr(0, 20);
            } else {
                return val;
            }
        },
        filterVal(val) {
            if (val == undefined) {
                return "...";
            } else {
                return val;
            }
        },
        filterDate(val) {
            return moment(val).format("YYYY-MM-DD");
        }
    }
};
</script>

<style scoped lang="scss">
#id {
    margin-left: 250px;
    padding-left: 35px;
    padding-right: 85px;
}
.id_info {
    margin: 0px;
    padding: 0px;
    > li {
        list-style: none;
        margin-top: 30px;
        // margin-bottom: 25px;
        border-bottom: 1px solid #dddddd;
        .id_info_span_1 {
            > a {
                font-size: 30px;
                float: left;
                text-decoration: none;
                color: #333333;
                &:hover {
                    cursor: pointer;
                    color: #2479cc;
                    transition: 0.5;
                }
            }
        }
        .id_info_span_2 {
            font-weight: 400;
            float: right;
            margin-top: 15px;
            font-size: 14px;
        }
    }
}
.id_info_div {
    font-weight: 300;
}
.id_info_content {
    margin-top: 30px;
    margin-bottom: 50px;
    .id_info_content_read {
        > a {
            text-decoration: none;
            display: inline-block;
            margin-top: 25px;
            color: #2479cc;
        }
        &:hover {
            cursor: pointer;
        }
    }
}
.id_bottom {
    height: 60px;
    line-height: 60px;
    color: #2479cc;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 25px;
}
.PreviousPage {
    float: left;
    &:hover {
        cursor: pointer;
    }
}
.nextPage {
    float: right;
    &:hover {
        cursor: pointer;
    }
}
.id_middle_center {
    margin: 0px auto;
    width: 80px;
    &:hover {
        cursor: pointer;
    }
}
</style>

